<template>
	<view>
		<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg"  :isBack="true">
			<block slot="content">授权列表</block>
			
		</cu-custom>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入搜索的关键词" confirm-type="search" @input="searchIcon"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round"  @tap="authemp" >授权</button>
				
			</view>
			
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">提示</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						请至少选择一个产品
					</view>
				</view>
			</view>
			
		</view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
		 <checkbox-group class="block" @change="CheckboxChange">
			<block v-for="(item,index) in checkbox" :key="index" v-if="item.isShow">
				
				<view  :class="'indexItem-' + item.value" :id="'indexes-' + item.value" :data-index="item.value">
					
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-item" >
							<view class="cu-form-group">
						<checkbox    :class="checkbox[index].checked?'checked':''" :checked="checkbox[index].checked"  :value="item.id"></checkbox>
						</view>
							<view class="cu-avatar round lg" :style="[{'background-image':'url('+item.urlimage+')'}]"></view>
							<view class="content">
								<view class="text-black">{{item.value}}</view>
								<view class="text-gray text-sm " style="color:#ED1C24;font-weight: bold;left:97%;position: absolute;">
									{{item.price}}¥
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</block>
			
			</checkbox-group>
		</scroll-view>
		
		
		
	</view>
	
	
	
</template>

<script>
	export default {
		
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				checkbox: [],
				valuess:[],
				authname:'',
				modalName: null,
				authlist:[]
			};
		},
		
		onLoad() {
			console.log("onload indexsnew...");
			
			// for (let i = 0; i < 26; i++) {
			// 	var checkbo= new Object();
				
			// 	checkbo.checked=false;
			// 	checkbo.value= String.fromCharCode(65 + i);
			// 	checkbo.isShow=true;
				
			// 	this.checkbox.push(checkbo);
			// }
			
			/**
			 * 加载授权列表
			 */
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_AUTHLIST,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					// data:{
					// 	username:getApp().globalData.username,
					// 	token:getApp().globalData.token,
					// 	rec:2,
					// 	departid:getApp().globalData.departid
					// },
					complete: (res) => {
						console.log(res.data)
						if (res.data.code == 0) {
						  for(let i=0;i<res.data.data.length;i++){
							  
							  var checkbo= new Object();
							  
							  checkbo.checked=false;
							  checkbo.value= res.data.data[i].authname;
							  checkbo.isShow=true;
							  checkbo.price=res.data.data[i].price;
							  // checkbo.price=0;
							  checkbo.urlimage=res.data.data[i].urlimage;
							  checkbo.id=res.data.data[i].id;
							  checkbo.indexs=res.data.data[i].indexs;
							  
							  this.checkbox.push(checkbo);
							  
						  }
						}else{
							
								uni.showToast({
									title: res.data.message,
									icon: 'none',
								})
								setTimeout(function(){
								uni.reLaunch({
									url:'/pages/login/login'
								})
								},1000)
							
						}
					}
				});
			
		    
			
		},
		onShow(){
			console.log("onshow indexesnew...")
			return;
			this.checkUserInfo();
		},
		
		
		methods: {
			  checkUserInfo(){
			  	var that = this
			  	uni.getStorage({
			  		key:'userinfo',
			  		success:function(res){
			  		},
			  		fail() {
			  			uni.navigateTo({
			  				url: '/pages/login/login'
			  			})
			  		}
			  	})
			  },
		      searchIcon(e) 
		      {
						let key = e.detail.value.toLowerCase();
						console.log("key",key);
						let list = this.checkbox;
						for (let i = 0; i < list.length; i++) {
							let a = key;
							let b = list[i].value.toLowerCase();
							if (b.search(a) != -1) {
								list[i].isShow = true
							} else {
								list[i].isShow = false
							}
						}
						this.checkbox = list
					},
			
			authemp(){
				if(this.valuess.length>0){
					uni.navigateTo({
						url: '../auth/saveauth?authlist='+JSON.stringify(this.authlist)+'&name='+this.authname
					})
					
					
					
				}else{
					this.modalName='Modal';
					
				}
				
				
			},
			hideModal(e) {
				this.modalName = null
			},
			
			// //获取文字信息
			// getCur(e) {
			// 	this.hidden = false;
			// 	this.listCur = this.list[e.target.id].name;
			// },
			// setCur(e) {
			// 	this.hidden = true;
			// 	this.listCur = this.listCur
			// },
			// //滑动选择Item
			// tMove(e) {
			// 	let y = e.touches[0].clientY,
			// 		offsettop = this.boxTop,
			// 		that = this;
			// 	//判断选择区域,只有在选择区才会生效
			// 	if (y > offsettop) {
			// 		let num = parseInt((y - offsettop) / 20);
			// 		this.listCur = that.list[num].name
			// 	};
			// },

			// //触发全部开始选择
			// tStart() {
			// 	this.hidden = false
			// },

			// //触发结束选择
			// tEnd() {
			// 	this.hidden = true;
			// 	this.listCurID = this.listCur
			// },
			// indexSelect(e) {
			// 	let that = this;
			// 	let barHeight = this.barHeight;
			// 	let list = this.list;
			// 	let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
			// 	for (let i = 0; i < list.length; i++) {
			// 		if (scrollY < i + 1) {
			// 			that.listCur = list[i].name;
			// 			that.movableY = i * 20
			// 			return false
			// 		}
			// 	}
			// },
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
					//console.log(this.checkbox);
					
					this.valuess=values;
					console.log(this.valuess);
					this.authname='';
					this.authlist=[];
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].id == values[j]) {
							this.authname+=items[i].value+",";
							items[i].checked = true;
							var auth=new Object();
							auth.value=items[i].value;
							auth.price=items[i].price;
							auth.id=items[i].id;
							auth.indexs=items[i].indexs;
							this.authlist.push(auth);
							
						
							break
						}
					}
				}
				this.authname=this.authname.substring(0,this.authname.length-1);
				
				console.log("ss",JSON.stringify(this.authlist) );
				
			}
		}
	}
</script>

<style>
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
		top: 56px;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
